<template>
    <!-- 订单导航切换 -->
    <van-tabs v-model:active="activeName" @change="onChange">
        <van-tab title="全部"></van-tab>
        <van-tab title="代付款"></van-tab>
        <van-tab title="已付款"></van-tab>
    </van-tabs>
    <!-- 骨架屏区域 -->
     <van-skeleton title :row="10"  v-if="djstatus"/>
    <!-- 渲染区域   代付款1  已付款2-->
    <div v-for="item in myorderDataFather" v-else>
        <van-cell-group style="margin-top: 20px;">
            <van-cell title="订单号" :value="item.orderId" />
            <van-cell title="下单时间" :value="item.create_time" />
            <van-cell title="价格" :value="(item.totalPrice / 100).toFixed(2)" />
            <van-cell title="付款状态" :value="item.status == 1 ? '代付款' : '已付款'" />
        </van-cell-group>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { myorderlApi } from '@/api/api'
// 自定义订单数据
let myorderData = ref([])
// 数据要进行筛选 筛选的时候不能筛选源数据
let myorderDataFather = ref([])
myorderlApi(localStorage.getItem('username')).then(res => {
    console.log('订单列表', res)
    myorderData.value = res.data.data
    myorderDataFather.value = myorderData.value
})
// 通过 onchange 事件 奇幻
const onChange = (index) => {
    console.log(index)
     if (index == 0) {
        myorderDataFather.value = myorderData.value
    }
    if (index == 1) {
        myorderDataFather.value = myorderData.value.filter(item => item.status == 1)
    }
    if (index == 2) {
        myorderDataFather.value = myorderData.value.filter(item => item.status == 2)
    }
}
// 骨架屏
let djstatus = ref(true)
setTimeout(()=>{
    djstatus.value = false
},2000)
</script>

<style lang="scss" scoped></style>